import MusicList from '@/components/music-list/music-list.vue'
import storage from 'good-storage'
import { processSongs } from '@/service/song'

export default function createDetailComponent(name:any, key:any, fetch:any) {
  return {
    name,
    components: { MusicList },
    props: {
      data: Object
    },
    data() {
      return {
        songs: [],
        loading: true
      }
    },
    computed: {
      computedData():any {
        let ret = null
         // @ts-ignore
        const data:any = this.data 
        if (data) {
          ret = data
        } else {
          const cached = storage.session.get(key)
           // @ts-ignore
          if (cached && (cached.mid || cached.id + '') === this.$route.params.id) {
            ret = cached
          }
        }
        return ret
      },
      pic() {
        const data:any = this.computedData
        return data && data.pic
      },
      title() {
        const data:any = this.computedData
        return data && (data.name || data.title)
      }
    },
   
    async created() {
       // @ts-ignore
      const data:any = this.computedData 
      if (!data) {
         // @ts-ignore
        const path: string = this.$route.matched[0].path
         // @ts-ignore
        this.$router.push({
          path
        })
        return
      }
      const result = await fetch(data)
       // @ts-ignore
      this.songs = await processSongs(result.songs)
       // @ts-ignore
      this.loading = false
    }
  }
}
